<template>
  <div class="boundary">
    <div class="box-left">
      <collapse-box>
        <work-task-tree v-if="show" :areaData="areaData" @workSelected="workSelectedHandler" @toChangeApply="toChangeApplyHandler"/>
      </collapse-box>
    </div>
    <div class="box-right">
      <region-map :polygon="mapPolygon" map-width="100%" map-height="100vh" ref="areaMap" @positionChange="positionChangeHandler" :vectorId="models.vectorId" :position="models.position">
        <template #card>
          <div class="boundary-right">
            <boundary-card  ref="boundaryCard"  :workId="models.workId" @toChange="toChange" @afreshMap="afreshMap" @afreshJsonMap="afreshJsonMap"/>
          </div>
        </template>
      </region-map>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Ref} from 'vue-property-decorator';
import WorkTaskTree from "@/views/region/components/WorkTaskTree.vue";
import BoundaryCard from "@/views/region/components/BoundaryCard.vue";
import RegionMap from "@/components/RegionMap.vue";
import {getAreaConfirm} from '@/api/areaConfirm'
import {Getter} from "vuex-class";
import CollapseBox from "@/components/CollapseBox.vue";
@Component({
  components: {RegionMap, WorkTaskTree,BoundaryCard,CollapseBox}
})
export default class boundary extends Vue {
  @Getter('mapPolygon') private mapPolygon!: any;
  @Ref('boundaryCard')  boundaryCard;
  @Ref("areaMap") areaMap!:any;
  private show = true;
  private models:any ={
    position:'',
    vectorId:'',
    workId:''
  };
  areaData:any=null;



  workSelectedHandler(workId){
    this.models.workId = workId;
    this.getThisAreaConfirm(workId);
    this.boundaryCard.workChangeWatch(workId);
  }


  getThisAreaConfirm(workId){

    getAreaConfirm({workId:workId}).then(res =>{
        if(!res.data){
          this.$message.error("本级无任务");
          this.areaData = null;
          this.models.position =null;
          this.models.vectorId =null;
          return;
        }
        // this.areaMap.clearDraw();
        this.$store.dispatch('updateMapPolygon',res.data.areaConfirm && res.data.areaConfirm.polygon || "")
        this.$store.dispatch('saveAreaData',res.data.areaConfirm)
        this.areaData =res.data

        this.models.position = res.data.areaConfirm.position && res.data.areaConfirm.position.split(',');
        this.models.vectorId = res.data.areaConfirm.vectorId;
      }).catch(e =>{
        console.error(e);
      });
    }

  positionChangeHandler(val){
    console.log(val);
  }
  toChange(){
    this.boundaryCard.vectorId = this.areaMap.getGeoFile();
    this.boundaryCard.polygon = this.areaMap.getPolygon();
  }
  afreshMap(){
    this.areaMap.startModify('polygon');
  }
  afreshJsonMap(){
    this.areaMap.startModify('json');
  }

  toChangeApplyHandler(){
    this.boundaryCard.toChange();
  }
  mounted(){
    (this as any).$bus.$on('marginalCheckedHandler',(row:any) =>{

      if(row.vectorId){
        this.models.vectorId =row.vectorId;
      }
      if(row.position){
        this.models.position =row.position.split(',');
      }

    });
  }
}
</script>
<style lang="scss" scoped>
.boundary {
  display: flex;
  height: 100%;
  .box-left {
    height: auto;
    position: relative;
    min-height: 100vh;
    background: #ffffff;
  }

  .box-right {
    flex: 1;
    position: relative;
    .boundary-right{
      position: absolute;
      top: 18px;
      left: 18px;
      z-index: 1;
    }
  }
}
</style>
